var holder = document.getElementById('holder'), tests = {
					filereader : typeof FileReader != 'undefined',
					dnd : 'draggable' in document.createElement('span'),
					formdata : !!window.FormData,
					progress : "upload" in new XMLHttpRequest
				}, support = {
					filereader : document.getElementById('filereader'),
					formdata : document.getElementById('formdata'),
					progress : document.getElementById('progress')
				}, acceptedTypes = {
					'image/png' : true,
					'image/jpeg' : true,
					'image/gif' : true
				}, progress = document.getElementById('uploadprogress'), fileupload = document
						.getElementById('upload');

				"filereader formdata progress".split(' ').forEach(
						function(api) {
							if (tests[api] === false) {
								support[api].className = 'fail';
							} else {
								// FFS. I could have done el.hidden = true, but IE doesn't support
								// hidden, so I tried to create a polyfill that would extend the
								// Element.prototype, but then IE10 doesn't even give me access
								// to the Element object. Brilliant.
								support[api].className = 'hidden';
							}
						});

				function previewfile(file) {
					if (tests.filereader === true
							&& acceptedTypes[file.type] === true) {
						var reader = new FileReader();
						reader.onload = function(event) {
							var image = new Image();
							image.src = event.target.result;
							image.width = 400; // a fake resize
							holder.appendChild(image);
						};

						reader.readAsDataURL(file);
					} else {
						holder.innerHTML += '_$tUploaded '
								+ file.name
								+ ' '
								+ (file.size ? (file.size / 1024 | 0) + 'K'
										: '');
						console.log(file);
					}
				}
				//clear the div portion
				$('#clear').click(function() {
					$('#holder').empty();
					 $( "#uploadprogress" ).val(0);
				});
				

				$('#submit').click(function() {

					imageFiles = document.getElementById('files').files;
					// get the number of files
					numFiles = imageFiles.length;
					readfiles(imageFiles);

				});

				function readfiles(files) {
					//debugger;
					//alert('inside readfiles');
					var formData = tests.formdata ? new FormData() : null;
					for ( var i = 0; i < files.length; i++) {
						if (tests.formdata)
							formData.append('file', files[i]);
						previewfile(files[i]);
					}

					//alert(jspPath);
					// now post a new XHR request
					if (tests.formdata) {
						//alert('inside form data');
						var xhr = new XMLHttpRequest();
						xhr.open('POST', "/SeamCarving/Main");
						xhr.onload = function() {
							progress.value = progress.innerHTML = 100;
						};

						if (tests.progress) {
							xhr.upload.onprogress = function(event) {
								if (event.lengthComputable) {
									var complete = (event.loaded / event.total
											* 100 | 0);
									progress.value = progress.innerHTML = complete;
								}
							};
						}

						xhr.send(formData);
						alert(xhr.responseText);
					}
				}

				if (tests.dnd) {
					holder.ondragover = function() {
						this.className = 'hover';
						return false;
					};
					holder.ondragend = function() {
						this.className = '';
						return false;
					};
					holder.ondrop = function(e) {
						this.className = '';
						e.preventDefault();
						readfiles(e.dataTransfer.files);
					};
				} else {
					fileupload.className = 'hidden';
					fileupload.querySelector('input').onchange = function() {
						readfiles(this.files);
					};
				}